<nz-space>
  <input *nzSpaceItem nz-input placeholder="输入类名模糊查询" [(ngModel)]="query.className" style="width: 150px" />
  <nz-select
    *nzSpaceItem
    nzAllowClear
    nzMode="multiple"
    nzPlaceHolder="选择任务状态查询，可多选"
    [(ngModel)]="query.states"
    style="width: 300px"
  >
    <nz-option *ngFor="let state of taskStates" [nzLabel]="state.label" [nzValue]="state.name"></nz-option>
  </nz-select>
  <button *nzSpaceItem nz-button (click)="loadTasks()" [nzLoading]="isLoading" nzType="primary">
    <span nz-icon nzType="search"></span>查询
  </button>
</nz-space>

<div style="margin-top: 8px">
  <nz-table #table [nzData]="tasks" [nzLoading]="isLoading" [nzFrontPagination]="false" [nzShowPagination]="false">
    <thead>
      <tr>
        <th id="no" nzWidth="60px">序号</th>
        <th id="config">配置信息</th>
        <th id="monitor">运行信息</th>
        <th id="actions" nzWidth="60px">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td colspan="4">
          <button nz-button (click)="add()" nzType="dashed" nzBlock>
            <span nz-icon nzType="plus"></span>
            新建任务配置
          </button>
        </td>
      </tr>
      <tr *ngFor="let data of table.data; let i = index">
        <td>{{ i + 1 }}</td>
        <td>
          <span nz-typography nzType="success">类：{{ data.className }}</span>
          <span nz-typography>方法：{{ data.methodName }}</span>
          <span nz-typography>参数：{{ data.methodParams }}</span>
          <span nz-typography>cron：{{ data.cronExpression }}</span>
          <span nz-typography>
            状态:
            <nz-switch
              [ngModel]="data.enabled"
              nzCheckedChildren="启用"
              nzUnCheckedChildren="禁用"
              nzDisabled
            ></nz-switch>
          </span>
        </td>
        <td>
          <span nz-typography>启动时间：{{ data.startUpTime | date: 'yyyy-MM-dd HH:mm:ss' }}</span>
          <span nz-typography>最后运行时间：{{ data.lastRunTime | date: 'yyyy-MM-dd HH:mm:ss' }}</span>
          <span nz-typography>运行次数：{{ data.numOfRuns }}</span>
          <span nz-typography>异常次数：{{ data.numOfErrors }}</span>
          <span nz-typography>
            状态:
            <nz-tag nzColor="success" *ngIf="data.scheduled">已计划</nz-tag>
            <nz-tag nzColor="error" *ngIf="!data.scheduled">未计划</nz-tag>
          </span>
        </td>
        <td><a [routerLink]="['/job/custom-task-manager/', data.configId]">管理</a></td>
      </tr>
    </tbody>
  </nz-table>
</div>
